<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <label for="framework">Select a JS Framework</label>
    <!-- <select id="framework" multiple> -->
    <select id="framework">
        <option value="1">Angular</option>
        <option value="2" selected>React</option>
        <option value="3">Vue.js</option>
        <option value="4">Ember.js</option>
    </select>
    <button id="btn">Get the Selected Index</button>

    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex); // index of the selected option
            alert(sb.value);// value of the selected option
            console.log(sb.options[sb.selectedIndex].text)
            // alert(sb.options[sb.selectedIndex].value)
        };

    </script>
</body>

</html>